<template>
	<view class="personInfo_box">
		<view class="personInfo">
			<view class="personInfo_item">
				<text>收货人</text><input type="text" placeholder="收货人信息" value="" />
			</view>
			<view class="personInfo_item">
				<text>性别</text>
				<view class="uni-px-5 uni-pb-5">
					<uni-data-checkbox v-model="radio" :localdata="sex"></uni-data-checkbox>
				</view>
			</view>
			<view class="personInfo_item" style="position: relative;">
				<text>手机号</text><input type="text" placeholder="收货人手机号" value="" />
				<text class="phone">自动填写</text>
			</view>
			<view class="personInfo_item">
				<text>详细地址</text><input type="text" placeholder="请选择详细地址" value="" />
			</view>
			<view class="personInfo_item" style="border-bottom: none">
				<text>门牌号</text><input type="text" placeholder="街道/门牌号" value="" />
			</view>
		</view>
	</view>
	<!-- 标签 -->
	<view class="addressTap_box">
		<view class="addressTap">
			<view class="addressTap_item1">
				<text>标签</text>
				<text>家</text>
				<text>公司</text>
				<text>学校</text>
			</view>
			<view class="addressTap_item" style="border-bottom: none">
				<text class="deful">设为默认地址</text>
			</view>
		</view>
	</view>
	<!-- 保存按钮 -->
	<button>保存并使用</button>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	let radio = ref(0);
	let sex = ref([{
		text: '先生',
		value: '男'
	}, {
		text: '女士',
		value: '女'
	}])
</script>

<style>
	page {
		background-color: #f8f8f8;
	}

	.personInfo_box {
		width: 100%;
		height: 534rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
		margin-top: 28rpx;
	}

	.personInfo {
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
		background-color: #fff;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.personInfo_item {
		display: flex;
		align-items: center;
		width: 100%;
		line-height: 100rpx;
		border-bottom: 1rpx solid #eee;
	}

	input {
		height: 100rpx;
		margin-left: 32rpx;
	}

	.personInfo_item text {
		display: block;
		width: 116rpx;
		font-size: 28rpx;
	}

	.uni-px-5 {
		margin-left: 24rpx;
		padding-right: 0px;
	}

	.uni-pb-5 {
		margin-top: 25rpx;
	}
	.phone{
		display: inline-block;
		width: 112rpx;
		line-height:40rpx;
		background-color: #0050c8;
		font-size: 18rpx!important;
		text-align: center;
		color: white;
		position: absolute;
		right: 0rpx;
		border-radius: 8rpx;
	}
	.addressTap_box{
		margin-top: 28rpx;
		width: 100%;
		height: 208rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
	}
	.addressTap{
		border-radius: 15rpx;
		width: 100%;
		height: 100%;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
	.addressTap_item1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		line-height: 100rpx;
		border-bottom: 1rpx solid #eee;
	}
	.addressTap_item1 text:first-child{
		flex:0.6;
	}
	.addressTap_item1 text:not(:nth-child(1)){
		display: inline-block;
		width: 126rpx;
		line-height: 48rpx;
		font-size: 26rpx;
		border: 1rpx solid #ccc;
		color: #ccc;
		border-radius: 5rpx;
		text-align: center;
	}
	.addressTap_item text {
		/* display: inline-block; */
		font-size: 28rpx;
	}
	.deful{
		width: 130rpx;
		line-height:100rpx;
	}
	button{
		margin-top: 100rpx;
		width: 680rpx;
		line-height: 82rpx;
		border-radius: 82rpx;
		background-color: #0050c8;
		color: white;
		font-size: 32rpx;
	}

</style>
